<template>
    <div class="login">
        <div class="input">
            <div class="title">预约挂号系统</div>
            <el-form
                :model="formModel"
                :rules="rules"
                ref="form"
                @keyup.enter="log"
                >
                <el-form-item prop="count">
                    <el-input
                        v-model="formModel.count"
                        style="width: 280px; margin: 20px 0;"
                        size="large"
                        placeholder="请输入用户名"
                        :prefix-icon="User"
                        clearable
                    />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        v-model="formModel.password"
                        style="width: 280px; margin: 20px 0;"
                        size="large"
                        type="password"
                        placeholder="请输入密码"
                        show-password
                        :prefix-icon="Key"
                        clearable
                    />
                </el-form-item>
            </el-form>
            <br>
            <el-button type="primary" style="width: 280px; height: 40px;" @click="log">登录</el-button>
            <div class="other">
                <el-link type="info" @click="toRegister">没有账号，去注册</el-link>
                <el-link type="info">忘记密码</el-link>
            </div>
        </div>
    </div>
</template>

<script setup>
import { User, Key } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { login } from '@/api/login'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

    defineOptions({
        name:'Log'
    })
    const formModel = reactive({
        count:'',
        password:''
    })
    const rules = {
        count: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 4, max: 20, message: '用户名必须是4~20位字符', trigger: 'blur' }
        ],
        password: [
            { pattern: /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,15}$/ , message: '密码必须为6~15位字母、数字', trigger: 'blur' }
        ]
    }
    
    const router = useRouter()

    async function log(){
        try {
            const response = await login( formModel.count, formModel.password )
            console.log('response',response)
            if(!response.status){
                ElMessage({
                    message: '登录成功',
                    type: 'success',
                    duration: 2000 // 消息持续时间，单位：毫秒
                })
                // 设置登录状态并跳转
                sessionStorage.setItem('auth', 'true')
                sessionStorage.setItem('token',response.token)
                sessionStorage.setItem('username',formModel.count)
                sessionStorage.setItem('user_id',response.data.id)
                sessionStorage.setItem('tokenExpiry',response.expireIn)
                localStorage.setItem('userRole', response.data.role); // Store user role in localStorage
                router.replace('/home')
            } else {
                ElMessage({
                    message: response.msg,
                    type: 'warning',
                    duration: 2000 
                })
            }
        } catch {

        }
    }
    function toRegister(){
        router.replace('/register')
    }
</script>

<style lang="scss" scoped>
.login {
    flex: 0 1 auto;
    flex-grow: 1;
    display: flex;
    justify-content: center;

    .input {
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            text-align: center;
            font-size: 30px;
            margin: 18px 0;
        }
        
        .other {
            width: 100%;
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>